#app {
  width: 700px;
  height: 875px;
  border: 2px solid #00e1ff;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;

  .content {
    padding: 20px;
    margin-top: 20px;

    .character-box {
      width: 650px;
      border: 1px solid #d9d9d9;
      border-radius: 5px;

      ul {
        margin-top: 10px;
        height: 60px;
        margin-left: 5px;
        padding-left: 0;

        li {
          list-style: none;
          float: left;
          width: 50px;
          height: 50px;
          margin-left: 5px;
          cursor: pointer;

          img {
            border-radius: 5px;
            border: 1px solid #ffa500;
            width: 50px;
            height: 50px;
          }
        }
      }

      span {
        margin-left: 5px;
      }

      .character-all {
        img:hover {
          border: 1px solid #ff0000;
        }
      }

      .character-my {
        li {
          position: relative;

          span {
            opacity: 0.6;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
          }

          img {
            z-index: 1;
            opacity: 0.6;
          }
        }
      }
    }

    .form {
      margin-top: 10px;
      display: block;

      .label1 {
        display: block;
        float: left;
        width: 200px;
        font-size: 18px;
        margin-top: 3px;
      }
    }

    .result {
      margin-top: 10px;

      .detail {
        height: 200px;
        overflow-y: auto;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        padding-left: 10px;
      }
    }
  }

  .tooltip-inner {
    white-space: pre-wrap;
  }
}

